<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String对象</title>
</head>
<body>
    <script>
        function show(){
            let email = document.getElementById("email").value;
            console.log(email)
            let username = null;
            let host = null;
            const index = email.indexOf('@');
            if(index == -1){
                alert('邮箱地址有误')
            }else {
                username = email.substring(0,index);
                host = email.substring(index+1);
                document.getElementById("username").innerText = username;
                document.getElementById("host").innerText = host;
            }
        }
    </script>
    <p>
        email:<input id="email"/><button onclick="show()">分析</button>
    </p>
    <p>
        用户名:<span id="username">xxx</span>
    </p>
    <p>
        主机:<span id="host">xxx</span>
    </p>
</body>
</html>